.page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-image: url("../../../assets/img/看板素材/生成看板/背景2.jpg");
  background-size: cover; // 确保背景图片覆盖整个页面
  background-position: center; // 确保背景图片居中
  background-repeat: no-repeat; // 防止背景图片重复

  .header {
    width: 100%;
    height: 8.241vh;
    display: flex;
    background-image: url("../../../assets/img/看板素材/生成看板/top.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    justify-content: center;

    .header-text {
      color: #27bde8;
      font-size: 4vh;
      padding-top: 1.042vh;
      letter-spacing: 1.042vw;
      padding-left: 1.042vw;
      font-weight: 550;
      text-shadow: 0 0 10px rgba(39, 189, 232, 0.7); // 添加外发光效果
    }
  }

  .body {
    flex-grow: 1;

    .body-content {
      width: 100%;
      height: 100%;
      padding: 0 1.042vw 1.042vw 1.042vw;
      display: flex;
      flex-direction: column;

      .content-banner {
        width: 100%;
        display: flex;
        justify-content: space-around;
        flex-direction: row;

        .banner-item-box {
          width: 33%;
          height: 17.6vh;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          padding: 0 3.125vw;

          .box-item {
            width: 50%;
            height: 100%;
            position: relative;

            img {
              width: 100%;
              height: 100%;
            }

            .item-number {
              font-size: 2.6042vw;
              position: absolute;
              left: 50%;
              top: 26%;
              transform: translateX(-50%); // 向左偏移自身的宽度

              &.number1 {
                color: #4adfcb;
              }

              &.number2 {
                color: #2ac8f2;
              }

              &.number3 {
                color: #f7b500;
              }
            }

            .item-text {
              font-size: 1.042vw;
              color: #fff;
              position: absolute;
              left: 50%;
              transform: translateX(-70%);
              bottom: 5%;
              letter-spacing: 0.1vw;
            }
          }
        }
      }

      .content-wrapper {
        flex-grow: 1;
        padding-top: 1.042vw;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        gap: 0.78125vw;

        .content-item {
          width: 25%;
          height: 100%;
          display: flex;
          gap: 0.78125vw;
          flex-direction: column;

          &.mid {
            .content-item-item.bot {
              .item-title {
                .title-img {
                  .title-span {
                    left: 1.5%;
                  }
                }
              }
            }
          }

          .content-item-item {
            width: 100%;
            height: 50%;
            display: flex;
            flex-direction: column;

            .item-title {
              width: 100%;
              height: auto;
              position: relative;

              .title-img {
                img {
                  width: auto;
                  height: 4.167vh;
                }

                .title-span {
                  position: absolute;
                  top: 12%;
                  left: 3%;
                  font-size: 2.037vh;
                  color: #28c2ec;
                  text-shadow: 0 0 5px #297fff, 0 0 10px #297fff, 0 0 15px #297fff, 0 0 20px #297fff;

                }
              }
            }

            .item-body {
              flex-grow: 1;
              background-image: url(../../../assets/img/看板素材/生成看板/边框.png);
              background-size: 100% 100%;
              background-repeat: no-repeat;
              &.zanting{
                display: flex;
                flex-direction: column;
                .zanting-left{
                  width: 100%;
                  height: 75%;
                }
                .zanting-right{
                  width: 100%;
                  height: 25%;
                  padding-top: 0.926vh;
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  align-items: center;
                  flex-wrap: wrap;
                  .zanting-title-text{
                    display: flex;
                    width: 40%;
                    flex-direction: row;
                    justify-content: space-between;
                    .icon{
                      font-size: 0.73vw;
                    }
                    .number{
                      font-size: 0.8333vw
                    }
                  }
                }
              }
              &.baogong {
                display: flex;
                flex-direction: column;

                .title {
                  display: flex;
                  flex-direction: row;
                  justify-content: center;
                  flex-wrap: wrap;
                  .title-text {
                    color: #fff;
                    padding: 0.5208vh 0.78125vw;
                    align-self: center;
                    display: flex;
                    justify-content: space-around;
                    width: 50%;
                    font-size: 1.67vh;

                    .icon {
                      display: flex;
                      align-items: center;
                    }

                    .icon-dot-status {
                      font-size: 2.037vh;
                    }
                  }
                }

                .item-body-body {
                  height: 70%;
                }

              }

              &.zhuangtai {
                height: 0;
                padding: 1.5vh;
                overflow: hidden;
                flex-grow: 1;
                .list {
                  height: 100%;
                  width: 100%;
                  overflow: auto;
                  -ms-overflow-style: none;
                  /* 适用于 Internet Explorer 和 Edge */
                  scrollbar-width: none;
                  /* 适用于 Firefox */

                  &::-webkit-scrollbar {
                    display: none;
                    /* 适用于 Chrome, Safari 和 Opera */
                  }

                  .list-item {
                    width: 100%;
                    height: 7.41vh;
                    padding: 0.925vh;
                    color: white;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content:space-between;
                    .list-item-type{
                      width: 100%;
                      display: flex;
                      flex-direction: row;
                      justify-content: space-between;
                      font-size: 0.9375vw;
                      .type-time{
                        color: #3fc8e4;
                      }
                      .type-type {
                        &.type-kaigong {
                          color: #2ac8f2; /* 开工的字体颜色 */
                        }
                        &.type-baogong {
                          color: #1dca1e; /* 报工的字体颜色 */
                        }
                        &.type-zanting {
                          color: #f7b500; /* 暂停的字体颜色 */
                        }
                        &.type-huifu {
                          color: #2eead8; /* 恢复的字体颜色 */
                        }
                      }
                    }
                    .list-item-event{
                      font-size: 0.73vw;
                      width: 100%;
                    }
                    /* 可选：设置文本颜色为白色，以便在黑色背景上更清晰 */
                    &.alternate {
                      background-color: rgba(0, 0, 0, 0.3);
                      /* 30% 透明度的黑色背景 */
                    }
                  }
                }

              }
            }

            // &.bot{
            //  .item-title{
            //   .title-img{
            //     .title-span{
            //       left:5%;
            //     }
            //   }
            //  }
            // }
          }

          &.mid {
            width: 50%;

            .content-item-item {
              &.top {
                flex-direction: row;
                gap: 0.78125vw;
                height: 50%;
                overflow: hidden;

                .item-left {
                  width: 50%;
                  height: 110%;
                  position: relative;

                  .img {
                    width: 75%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;

                    .img-text {
                      font-size: 2vw;
                      color: #fff;
                      position: absolute;
                      left: 25%;
                      top: 20%;
                      text-align: center;
                    }
                  }

                  .left-left-img {
                    width: 100%;
                    height: 100%;
                  }

                  .item-left-text1 {
                    width: 11.417vw;
                    height: 7.407406vh;
                    position: absolute;
                    right: 45%;
                    top: 1.8542vh;
                    display: flex;
                    flex-direction: row;
                    justify-content: right;
                    align-items: center;
                    gap: 0.54vw;
                    transform: translate(100%, 0);

                    .jiantou {
                      display: flex;
                      flex-direction: row;
                      justify-content: left;
                      align-items: center;

                      .horizontal-line {
                        width: 4.6875vw;
                        height: 1px;
                        background-color: #3fc8e4;
                      }

                      .small-circle {
                        width: 0.78125vw;
                        height: 0.78125vw;
                        background-color: #3fc8e4;
                        /* 你可以根据需要更改颜色 */
                        border-radius: 50%;
                      }
                    }

                    .text {
                      display: flex;
                      flex-direction: column;
                      justify-content: center;

                      .text-number {
                        font-size: 1.25vw;
                        color: #3fc8e4;
                        font-weight: 600;
                        text-align: center;
                      }

                      .text-type {
                        font-size: 0.8333vw;
                        color: #fff;
                        text-align: center;
                      }
                    }
                  }

                  .item-left-text2 {
                    width: 11.417vw;
                    height: 7.407406vh;
                    position: absolute;
                    right: 45%;
                    top: 11.11111vh;
                    display: flex;
                    flex-direction: row;
                    justify-content: right;
                    align-items: center;
                    gap: 0.54vw;
                    transform: translate(100%, 0);

                    .jiantou {
                      display: flex;
                      flex-direction: row;
                      justify-content: left;
                      align-items: center;

                      .horizontal-line {
                        width: 2.88vw;
                        height: 1px;
                        background-color: #3fc8e4;
                      }

                      .small-circle {
                        width: 0.78125vw;
                        height: 0.78125vw;
                        background-color: #3fc8e4;
                        /* 你可以根据需要更改颜色 */
                        border-radius: 50%;
                      }
                    }

                    .text {
                      display: flex;
                      flex-direction: column;
                      justify-content: center;

                      .text-number {
                        font-size: 1.25vw;
                        color: #3fc8e4;
                        font-weight: 600;
                        text-align: center;
                      }

                      .text-type {
                        font-size: 0.8333vw;
                        color: #fff;
                        text-align: center;
                      }
                    }
                  }

                  .item-left-text3 {
                    width: 11.417vw;
                    height: 7.407406vh;
                    position: absolute;
                    right: 45%;
                    top: 20.833333vh;
                    display: flex;
                    flex-direction: row;
                    justify-content: right;
                    align-items: center;
                    gap: 0.5208vw;
                    transform: translate(100%, 0);

                    .jiantou {
                      display: flex;
                      flex-direction: row;
                      justify-content: left;
                      align-items: center;

                      .horizontal-line {
                        width: 4.6875vw;
                        height: 1px;
                        background-color: #3fc8e4;
                      }

                      .small-circle {
                        width: 0.78125vw;
                        height: 0.78125vw;
                        background-color: #3fc8e4;
                        /* 你可以根据需要更改颜色 */
                        border-radius: 50%;
                      }
                    }

                    .text {
                      display: flex;
                      flex-direction: column;
                      justify-content: center;

                      .text-number {
                        font-size: 1.25vw;
                        color: #3fc8e4;
                        font-weight: 600;
                        text-align: center;
                      }
                      .text-type {
                        font-size: 0.8333vw;
                        color: #fff;
                        text-align: center;
                      }
                    }
                  }
                }
                .item-right {
                  width: 50%;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  .item-title {
                    width: 100%;
                    height: auto;
                    position: relative;

                    .title-img {
                      img {
                        width: auto;
                        height: 4.167vh;
                      }

                      .title-span {
                        position: absolute;
                        top: 12%;
                        left: 3%;
                        font-size: 2.037vh;
                        color: #28c2ec;
                        text-shadow: 0 0 5px #297fff, 0 0 10px #297fff, 0 0 15px #297fff, 0 0 20px #297fff;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
